<template>
  <!--模板-->
    查询控件
  <hr>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <nf-find
    :findValue="findValue"
    :findArray="findArray"
    v-bind="findMeta"
  >
  </nf-find>
  <hr>
  简洁模式：
  <div
    v-for="(item, key, index) in findValue"
    :key="index"
  >
    {{key}}： {{item}}
  </div>
  <hr>
  标准模式：
  <div
    v-for="(item, key, index) in findArray"
    :key="index"
  >
    {{key}}： {{item}}
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import _findMeta from './find.json'

  export default defineComponent({
    name: 'nf-ui-elp-find',
    props: {
    },
    setup(props, context) {

      // 获取表单控件需要的meta
      const findMeta = reactive(_findMeta)

      // 根据 meta 创建表单的 model
      const findValue = reactive({})
      const findArray = reactive([])

      return {
        findMeta,
        findValue,
        findArray
      }
    }
  })
</script>